<template>
    <div class="pagestyle">
        <el-row :gutter="20">
            <el-col :span="13">
                <el-card class="card_box_child">
                    <div class="card_box active">
                        <p class="mask_sub_title">
                            <span>
                                <svg-icon class-name="search-icon" icon-class="biaotitubiao" />热备配置</span></p>
                        <el-row :gutter="20">
                            <el-col :span="6" class="fcc" style="display:flex;">
                                <div style="text-align:center">
                                    <img src="@/assets/images/hot.png" />
                                    <p>备机</p>
                                    <p>设备[0-2]</p>
                                </div>
                            </el-col>
                            <el-col :span="18" class="el-drawer_mash">
                                <el-row :gutter="20">
                                    <el-col :span="6">
                                        <p>IP端口</p>
                                        <p>192.234.14.2</p>
                                    </el-col>
                                    <el-col :span="18">
                                        <p>存放位置</p>
                                        <p>这是一段存放位置这是一段存放位置</p>
                                    </el-col>
                                    <el-col :span="6">
                                        <p>CPU</p>
                                        <p>QX6850</p>
                                    </el-col>
                                    <el-col :span="18">
                                        <p>使用率</p>
                                        <p>80%</p>
                                    </el-col>
                                    <el-col :span="24">
                                        <p>内存</p>
                                        <el-progress :percentage="50" />
                                    </el-col>
                                    <el-col :span="24">
                                        <p>硬盘存储空间</p>
                                        <el-progress :percentage="50" />
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="24">
                                <p class="fbc" style="border-top:1px solid #eee;padding:10px 0">
                                    <el-button type="primary" link v-if="userStore.modify">切换为主机</el-button>
                                    <el-button type="primary" link v-if="userStore.modify">编辑</el-button>
                                    <el-button type="primary" link v-if="userStore.modify">删除</el-button>
                                </p>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="card_box">
                        <p class="mask_sub_title">
                            <span>
                                <svg-icon class-name="search-icon" icon-class="biaotitubiao" />热备配置</span></p>
                        <el-row :gutter="20">
                            <el-col :span="6" class="fcc" style="display:flex;">
                                <div style="text-align:center">
                                    <img src="@/assets/images/hot.png" />
                                    <p>备机</p>
                                    <p>设备[0-2]</p>
                                </div>
                            </el-col>
                            <el-col :span="18" class="el-drawer_mash">
                                <el-row :gutter="20">
                                    <el-col :span="6">
                                        <p>IP端口</p>
                                        <p>192.234.14.2</p>
                                    </el-col>
                                    <el-col :span="18">
                                        <p>存放位置</p>
                                        <p>这是一段存放位置这是一段存放位置</p>
                                    </el-col>
                                    <el-col :span="6">
                                        <p>CPU</p>
                                        <p>QX6850</p>
                                    </el-col>
                                    <el-col :span="18">
                                        <p>使用率</p>
                                        <p>80%</p>
                                    </el-col>
                                    <el-col :span="24">
                                        <p>内存</p>
                                        <el-progress :percentage="50" />
                                    </el-col>
                                    <el-col :span="24">
                                        <p>硬盘存储空间</p>
                                        <el-progress :percentage="50" />
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="24">
                                <p class="fbc" style="border-top:1px solid #eee;padding:10px 0">
                                    <el-button type="primary" link v-if="userStore.modify">切换为主机</el-button>
                                    <el-button type="primary" link v-if="userStore.modify">编辑</el-button>
                                    <el-button type="primary" link v-if="userStore.modify">删除</el-button>
                                </p>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="11">
                <el-card class="card_box_child">
                    <p class="mask_sub_title">
                        <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>数据库配置</span></p>
                    <div class="fcc" style="margin:30.7% 36%;">
                        <el-row :gutter="20">
                            <el-col :span="24" class="fcc" style="display:flex;">
                                <div style="text-align:center">
                                    <img src="@/assets/images/hotshu.png" />
                                    <p>数据库</p>
                                    <p>设备[0-2]</p>
                                </div>
                            </el-col>
                            <el-col :span="24" class="el-drawer_mash">
                                <el-row :gutter="20" style="margin-left:20px">
                                    <el-col :span="12">
                                        <p>用户名</p>
                                        <p>admin</p>
                                    </el-col>
                                    <el-col :span="12">
                                        <p>端口号</p>
                                        <p>192.34.14.2</p>
                                    </el-col>
                                    <el-col :span="12">
                                        <p>属性</p>
                                        <p>主数据库</p>
                                    </el-col>
                                    <el-col :span="12">
                                        <p>连接方式</p>
                                        <p>连接方式1</p>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
</script>

<style lang="scss" scoped>
    .pagestyle {
        .card_box_child{
            height: calc(100vh - 150px) !important;
        }
        padding: 10px;
        overflow-y:auto;
        .card_box {
            border-radius: 8px;
            background: rgba(42, 130, 228, 0.04);
            padding: 10px;
            border: 1px solid rgba(235, 235, 235, 1);
            margin-bottom: 10px;

            &.active {
                border: 2px solid #2A82E4;
            }
        }
    }
</style>